<template>
  <div>
    <el-form ref="form" :model="formdata">
      <el-row>
        <el-col span="5">
          <el-form-item label="推送人">
            <el-input v-model="formdata.userName" style="width: 80%;" placeholder="查询推送人"></el-input>
        </el-form-item>
        </el-col>
        <el-col span="5">
          <el-form-item label="推送时间">       
            <el-date-picker
               v-model="formdata.searchTime"
               type="daterange"
               unlink-panels
               range-separator="至"
               start-placeholder="开始日期"
               end-placeholder="结束日期"
               :picker-options="pickerOptions">
            </el-date-picker>
        </el-form-item>
        </el-col>
        <el-col span="3">
          <el-button type="primary" class="el-icon-search" @click="searchData"> 搜索</el-button>
          <el-button type="success" class="el-icon-edit" @click="reviewed"> 已审阅</el-button>
        </el-col>
      </el-row>
    </el-form>
  
    <avue-crud :option="option"
               :table-loading="loading"
               :data="data"
               :page="page"
               @row-edit="editfun"
               @on-load="onLoad"
               @refresh-change="reloadPage"
               @selection-change="selectionChange">
    <template slot="message" slot-scope="scope">
        <p v-if="scope.row.isRead==0"><span style="color: red;font-size:50px;">·</span> {{ scope.row.message }}</p>
        <p v-else>{{ scope.row.message }}</p>
    </template>
    <template slot="menu">
      <el-button type="success" plain @click="msgDetail">详情</el-button>
    </template>
    
    </avue-crud>
  </div>
      
</template>

<script>
import { mapGetters } from "vuex";
import {setStore, getStore} from '@/util/store'
import {getList,reviewed} from "@/api/system/message";
import {getdate} from "@/api/system/common";


export default {
  // name: "errLogs",   align="right"
  data() {
    return {
      loading:true,
      formdata:{
        startDate:"",
        endDate:""
      },
      pickerOptions: {
          disabledDate(time) {
            return time.getTime() > Date.now();
          },
          shortcuts: [
            {
            text: '今天',
            onClick(picker) {
              picker.$emit('pick', [new Date(),new Date()]);
            }
          }, 
          {
            text: '昨天',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit('pick', [date,date]);
            }
          }, {
            text: '一周前',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [date,date]);
            }
          },{
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit('pick', [start, end]);
            }
          }
        ]
        },
      selectdata:[],
      data:[],
      page: {
        pageSize: 10,
        currentPage: 1,
        total: 0
      },
      option: {
        addBtn:false,
        delBtn: false,
        editBtn:false,
        columnBtn:false,
        selection:true,
        menu:true,
        column: [
          {
            label:"选择",
            type:"chekbox"
          },
          {
            label:"消息体",
            prop:"message",
            slot:true
          },
          {
            label:"推送人",
            prop:"pushName"
          },
          {
            label:"推送时间",
            prop:"addTime"
          }
        ]
      }
    };
  },
  methods: {
    reviewed(){
      console.log(this.selectdata);
      if(this.selectdata.length<=0){
          this.$message.error("请选择审阅的数据");
          return false;
      }
      reviewed(JSON.stringify(this.selectdata)).then(res=>{
        if(res.data.code==0){
               this.$message.error(res.data.msg);
           }else{
               this.$message.success("操作成功");
               this.onLoad(this.page,{});
           }
      })
    },
    msgDetail(){
      //消息详情体
      //跳转页面
      console.log(123);
      this.$router.push({src:'/orderManage/ordermsg'})

    },
    reloadPage(){
        this.formdata=[]; 
        this.onLoad(this.page); 
    },
    searchData(){
      console.log(this.formdata);
      if(this.formdata.searchTime!=null && this.formdata.searchTime!="" && this.formdata.searchTime!=undefined){
        this.formdata["startDate"]=getdate(this.formdata.searchTime[0])+" 00:00:00";
        this.formdata["endDate"]=getdate(this.formdata.searchTime[1])+" 24:00:00";
      }else{
        this.formdata["startDate"]=null;
        this.formdata["endDate"]=null;
      }
      this.formdata["userId"]=getStore({name: 'userInfo'}).userId;
      this.loading = true;
      getList(this.page.currentPage, this.page.pageSize, Object.assign(this.formdata, this.query)).then(res=>{
        if(res.data.code==200){
          this.data = res.data.data.data;
        this.page.total=res.data.data.count;
        this.loading = false;
        this.$message.success("操作成功");
        }else{
          this.$message.error("操作失败");
        }
      })
    },
    selectionChange(list){
      this.selectdata=list;
    },
      editfun(row,index){
      }, 
      //查询最新的消息提示
      onLoad(page, params = {}){
        this.loading = true;
        this.formdata["userId"]=getStore({name: 'userInfo'}).userId;
        getList(page.currentPage, page.pageSize, Object.assign(this.formdata, this.query)).then(res=>{
          this.data = res.data.data.data;
          this.page.total=res.data.data.count;
          this.loading = false;
        })  
      }
  }
};
</script>

<style lang="scss" scoped>
.code {
  font-size: 12px;
  display: block;
  font-family: monospace;
  white-space: pre;
  margin: 1em 0px;
}
</style>
